<template>
  <!-- 图片预览 -->
  <div class="img-preview flex flex-col justify-center" @click.self="handleClose">
    <van-swipe class="swipe" :loop="true" indicator-color="white" @change="onChange" :show-indicators="false">
      <van-swipe-item v-for="(item, index) in list" :key="index" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
        <img v-lazy="item" />
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">{{ current + 1 }}/{{ list.length }}</div>
      </template>
    </van-swipe>
  </div>
</template>

<script>
export default {
  name: 'ImgPreview',
  props: {
    list: Array,
  },
  data() {
    return {
      current: 0,
      clickFlag: false, // 是否点击（区别点击和滑动轮播图）
    }
  },
  methods: {
    onChange(index) {
      this.current = index
    },
    handleClose() {
      this.$emit('close')
    },
    onTouchStart() {
      this.clickFlag = true
    },
    onTouchMove() {
      this.clickFlag = false
    },
    onTouchEnd() {
      if (this.clickFlag) {
        // 点击
        this.handleClose()
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.img-preview {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #000;
  z-index: 99;
  .swipe {
    height: 30%;
    width: 100%;
    overflow: hidden;
    .van-swipe-item {
      img {
        width: 100%;
        height: 300px;
      }
    }
    .custom-indicator {
      position: absolute;
      right: 5px;
      bottom: 5px;
      padding: 2px 5px;
      font-size: 12px;
      color: #ffffffa5;
      background: rgba(0, 0, 0, 0.4);
    }
  }
}
</style>
